.colorYellow(){
  color: #FFAB32;//公共黄色字体
}
.borderYellow(){
  border: 1px solid#FFAB32;
}
.colorFFF(){
  color: #fff;//公共白色字体
}
.colorGrey( @color : #999){
  color:  @color;
}
.bgYellow(){
  background: #FFAB32;//公共黄色背景
}
.bgFFF(){
  background: #fff;
}
.bg99(){
  background: #999;
}
.overHidden(){
  overflow: hidden;
}
.boxShadow(@px:15px , @color : #e7e5e5 ){
  //公共白灰色 边框阴影
  box-shadow: 0px 0px @px #e7e5e5;-moz-box-shadow: 0px 0px @px #e7e5e5;-web-kit-shadow: 0px 0px @px #e7e5e5;
}
.border(@color :#EEEEEE ){
  border: 1px solid@color;
}
.border99(){
  border: 1px solid#999;
}
.input( @h:50px , @w:100%, @bg:#fff ){
  height: @h;width:@w;background: @bg;border: 1px solid#EEEEEE;border-radius: 4px;padding: 0 17px;color: #262626;
}
.placeholder(@fontsize:14px , @color : #999 , @fontFamily : "'MicrosoftYaHei', 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', 'Helvetica', 'Arial', 'sans-serif'") {
  //设置input placeholder字体大小，颜色，字体
  &::-webkit-input-placeholder {
    color: @color;font-size: @fontsize;font-family: @fontFamily;
  }
  &:-moz-placeholder {
    color: @color;font-size: @fontsize;font-family: @fontFamily;
  }
  &::-moz-placeholder {
    color: @color;font-size: @fontsize;font-family: @fontFamily;
  }
  &:-ms-input-placeholder {
    color: @color;font-size: @fontsize;font-family: @fontFamily;
  }
}
.textOverflow( @line : 3 , @height : 60px){
  //文字超出多少行就隐藏
  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: @line;height: @height;
}
.submit( @h:50px , @hoverBg : #ef8f04 ){
  line-height: @h;height: @h;.bgYellow;.borderRadius;.colorFFF;display: inline-block;width: 100%;text-align: center;font-size: 20px;
  transition: background 0.2s;
  &:hover{
    background: @hoverBg;
  }
}
.cancel( @h:50px){
  line-height: @h;height: @h;background: #EBEAEA;.borderRadius;color: #262626;display: inline-block;width: 100%;text-align: center;font-size: 16px;
}
.borderRadius( @radius : 4px){
  border-radius: @radius;
}
.noBorderRadiusTopLeft{
  border-top-left-radius: 0;
}
.noBorderRadiusTopRight{
  border-top-right-radius: 0;
}
.noBorderRadiusBottomLeft{
  border-bottom-left-radius: 0;
}
.noBorderRadiusBottomRight{
  border-bottom-right-radius: 0;
}
.textAlign( @align:left){
  text-align: @align;
}
.textLeft(){
  text-align: left;
}
.textRight(){
  text-align: right;
}
.textCenter(){
  text-align: center;
}
.tranY50( @Y : -50%){
  top:50%;-webkit-transform: translateY(@Y);transform: translateY(@Y);
}
.tranX50( @X : -50%){
  left:50%;-webkit-transform: translateX(@X);transform: translateX(@X);
}
.checkBox(@w:15px , @h:15px){
  content: '';display: inline-block;background: #fff;.borderYellow;width: @w;height: @h;border-radius: 4px;
}
.checked(@w:15px , @h:15px ){
  content: '';display: inline-block;background: #fff;.borderYellow;width: @w;height: @h;border-radius: 4px;
  background: url("../imgs/yellowgg.png") center center no-repeat;background-size: 70% auto;
}
/deep/ input{
  .placeholder();font-size: 16px;color: #262626;width: 464px;padding-left: 9px;border-color: #EEEEEE;
}
/deep/ .el-input.is-focus .el-input__inner{
  border-color: #EEEEEE;
}
/deep/ .el-input__inner , /deep/ .el-input__inner:focus{
  border-color: #EEEEEE!important;
}
.radioLabel(){
  float: left;display: inline-block;position: relative;
  >input{
    opacity: 0;position: absolute;z-index: 1;left: 0;top:0;width: 100%;height: 100%;
    &:hover{
      cursor: pointer;
    }
  }
  >span{
    position: relative;padding-left: 20px;line-height: 16px;display: inline-block;height: 16px;color: #666;
    >span{
      display: contents;.colorYellow;
    }
    &:before{
      content: '';display: inline-block;width: 14px;height: 14px;border-radius: 50%;border:1px solid#666;
      position: absolute;left: 0;top:50%;margin-top: -7px;box-sizing: border-box;
    }
  }
  >input:checked+span:before{
    content: '';display: inline-block;border:none;background: url("../../common/imgs/checkedradios.png") center center no-repeat;background-size: 100% 100%;
  }
}
.checkLabel(){
  position: relative;height: 22px;display: inline-block;
  >span{
    position: relative;padding-left: 22px;display: inline-block;line-height: 22px;height: 22px;
    &:before{
      content: '';width: 16px;height: 16px;display: block;border: 1px solid#999999;position: absolute;z-index: 1;left: 0;top: 50%;margin-top: -8px;.borderRadius;box-sizing: border-box;
    }
  }
  input{
    opacity: 0;width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top:0;
    &:hover{
      cursor: pointer;
    }
    &:checked+span:before{
      content: '';display: inline-block;border: 0;background: url("../imgs/checkedbgyellow.png") center center no-repeat;background-size: 100% 100%;
    }
  }
}
.minWin{
  background: #fff;position: absolute;z-index: 1;border-radius: 4px;box-shadow: 0px 0px 15px #ccc9c9;
  width: 221px;right: -230px;top: 5px;display: none; color: #999;
  >.top{
    display: inline-block;width: 100%;text-align: center;border-bottom: 1px solid#eee;
    >span{
      display: inline-block;width: 100%;
      &:first-child{
        color: #595959;font-size: 14px;padding-top: 14px;
      }
      &:last-child{
        padding: 14px 0;font-size: 14px;
      }
    }
  }
  >.line{
    display: inline-block;width: 100%;padding: 0 20px;padding-bottom: 18px;
    >span{
      display: inline-block;width: 100%;overflow: hidden;padding-top: 15px;
      >span{
        float: left;font-size: 14px;
        &.right{
          float: right;
        }
      }
    }
  }
}
.abWin{
  background: #fff;position: fixed;z-index: 1;border-radius: 4px;box-shadow: 0px 0px 15px #ccc9c9;width: 221px;display: block;color: #999;
  >.top{
    display: inline-block;width: 100%;text-align: center;border-bottom: 1px solid#eee;
    >span{
      display: inline-block;width: 100%;
      &:first-child{
        color: #595959;font-size: 14px;padding-top: 14px;
      }
      &:last-child{
        padding: 14px 0;font-size: 14px;
      }
    }
  }
  >.line{
    display: inline-block;width: 100%;padding: 0 20px;padding-bottom: 18px;
    >span{
      display: inline-block;width: 100%;overflow: hidden;padding-top: 15px;
      >span{
        float: left;font-size: 14px;
        &.right{
          float: right;
        }
      }
    }
  }
}

